<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套与依赖注入</title>

</head>
<body>
<div id="app">

    <btn>
        <template v-slot:default="{user}">
            <!--用子组件的值作为插槽里的内容-->
            {{user[0].age}}
        </template>
    </btn>


</div>
<template id="btn">
    <div>
        <slot v-bind:user="user">{{user[0].name}}</slot>
        <h2>{{getMsg}}</h2>
        <strong>Error!</strong>
        <btn2></btn2>
    </div>

</template>

<template id="btn2">
    <div>
        <slot v-bind:user="user2">{{user2[0].name}}</slot>
        <h2 style="color: red">{{getMsg}}</h2>
        <strong>Error!</strong>
    </div>
</template>

<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>

    const btn2 = {
        template: "#btn2",
        inject:['getMsg'],
        data() {
            return {
                apples22: [1, 2, 3, 4, 5],
                user2: [
                    {
                        name: "lisi",
                        age: 124
                    }
                ]
            }
        }
    };

    const btn = {
        template: "#btn",
        data() {
            return {
                apples2: [1, 2, 3, 4, 5],
                user: [
                    {
                        name: "zhangsan",
                        age: 12
                    }
                ]

            }
        },
        inject:['getMsg'],
        components: {
            btn2: btn2
        }
    };




    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            title: "fa",
            searchText: '',
            currentTab: "Home",
            tabs: ["Home", "Posts", "Archive"]
        },
        methods: {},
        created: function () {

        },
        mounted: function () {

        },
        provide(){
            return {
                getMsg:this.message
            }
        },
        computed: {},
        components: {
            btn: btn
        }
    })


</script>
</body>
</html>
